<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="/css/start/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />	
		<script type="text/javascript" language="javascript" src="/js/jquery.js"></script>
<!--<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>-->
<script type="text/javascript" src="/js/jquery-ui-1.8.21.custom.min.js"></script>

		<script type="text/javascript" language="javascript" src="/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				$('#example').dataTable( {
					"sPaginationType": "full_numbers",
					"iDisplayLength": -1,
					"aLengthMenu": [[50,100,200, -1], [50, 100, 200, "All"]]
				});
			} );
		</script>

		<style type="text/css" title="currentStyle">
			@import "/css/demo_page.css";
			@import "/css/demo_table.css";
		</style>
        
<style type="text/css">
.hasTooltip {
    position:relative;
}
.hasTooltip span {
    display:none;
}

.hasTooltip:hover span {
    display:block;
    background-color:#888;
    border-radius:1px;
    color:white;
    box-shadow:1px 1px 2px gray;
    position:absolute;
    padding:5px;
    top:0px;
    left:45px;   
    width:250px; /* I don't want the width to be too large... */
	/*white-space: nowrap; */
}	
</style>
<style type="text/css">
/* <![CDATA[ */

table, td
{
    border-color: #666;
    border-style: solid;
}
table, th
{
    border-color: #666;
    border-style: solid;
}

table
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
}
 
td
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
}
th
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
}

/* ]]> */
</style>

</head>
<body>
<H1>Staff Performance Summary</H1>
<table width="1000" border="0" cellspacing="1" cellpadding="5">
  <tr>
    <th scope="col">ID</th>
    <th scope="col">Name</th>
    <th scope="col">Total Sales</th>
    <th scope="col">Total Hr</th>
    <th scope="col">Total Unit</th>
    <th scope="col">Tol Invoices</th>
  </tr>
  <?php foreach($this->arrResAll as $key=>$v){?>
  <tr>
    <td><?php echo $key + 1 ?></td>
    <td><?php echo $v['name']?></td>
    <td>$ <?php echo $v['sales']?></td>
    <td><?php echo ($v['total_hour'] > 0)?$v['total_hour']:" - "?></td>
    <td><?php echo (int) $v['total_unit']?></td>
    <td><?php echo $v['total_trans']?></td>
  </tr>
  <?php }?>
</table>

<h1>Performance KPI List </h1>
<div style="width:1200px; text-align:left;">
<table width="1000" border="0" cellspacing="1" cellpadding="5" id="example">
<thead>
  <tr>
    <th scope="col">ID</th>
    <th scope="col">Name</th>
    <th scope="col">Sales /Hr</th>
    <th scope="col">Th</th>
    <th scope="col">Invoices /Hr</th>
    <th scope="col">Ti</th>
    <th scope="col">Sales /Invos</th>
    <th scope="col">Unit /Invos</th>
  </tr>
 </thead>
 <tbody> 
<?php foreach($this->arrResAll2 as $key2 =>$v2) {?>  
  <tr>
    <td><?php echo $key2 + 1;?></td>
    <td><?php echo $v2['name'] ?></td>
    <td><?php echo ($v2['sph'] > 0)?$v2['sph']:" - "?></td>
    <td><?php echo $v2['total_hour']?></td>
    <td><?php echo ($v2['tph'] > 0)?$v2['tph']:" - "?></td>
    <td><?php echo $v2['total_trans']?></td>
    <td> $ <?php echo ($v2['spt'] > 0)?$v2['spt']:" - "?></td>
    <td><?php echo ($v2['upt'] > 0)?$v2['upt']:" - "?></td>
  </tr>
<?php }?>  
</tbody>
</table>
</div>

</body>
</html>
